<template>
  <div class="container">
    <a-layout id="components-layout-demo-top-side-2" style="height: 100%">
      <a-layout-header class="header" style="height: 100%">
        <div
          class="logo"
          style="color: #fff; line-hight: 30px; text-align: center"
        >
          刷卡机后台
        </div>
        <!-- <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1"> nav 1 </a-menu-item>
          <a-menu-item key="2"> nav 2 </a-menu-item>
          <a-menu-item key="3"> nav 3 </a-menu-item>
        </a-menu> -->
      </a-layout-header>
      <a-layout style="height: 100%">
        <a-layout-sider width="200" style="background: #fff">
          <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0 }"
          >
            <a-sub-menu key="sub1">
              <span slot="title"> <a-icon type="shop" />商品</span>
              <a-menu-item key="1">
                <router-link to="/home/commodity">商品列表</router-link>
              </a-menu-item>
              <a-menu-item key="3"> option3 </a-menu-item>
              <a-menu-item key="4"> option4 </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"> <a-icon type="user" />用户</span>
              <a-menu-item key="5">
                <router-link to="/home/user">用户认证</router-link>
              </a-menu-item>
              <a-menu-item key="6"> option6 </a-menu-item>
              <a-menu-item key="7"> option7 </a-menu-item>
              <a-menu-item key="8"> option8 </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub16">
              <span slot="title"> <a-icon type="crown" />会员</span>
              <a-menu-item key="9">
                <router-link to="/member/index">会员列表</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub7">
              <span slot="title"><a-icon type="transaction" />退款</span>
              <a-menu-item key="10">
                <router-link to="/money/index">退款列表</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub6">
              <span slot="title"><a-icon type="money-collect" />贷款</span>
              <a-menu-item key="11">
                <router-link to="/loan/index">贷款列表</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"> <a-icon type="notification" />公告</span>
              <a-menu-item key="12">
                <router-link to="/notice/index">公告列表</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub9">
              <span slot="title"> <a-icon type="account-book" />余额流水</span>
              <a-menu-item key="12">
                <router-link to="/balance/index">流水列表</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub4">
              <span slot="title"> <a-icon type="edit" />记录</span>
              <a-menu-item key="13">
                <router-link to="/record/index">提现申请</router-link>
              </a-menu-item>
              <a-menu-item key="14">
                <router-link to="/record/transfer">转账申请</router-link>
              </a-menu-item>
              <a-menu-item key="15">
                <router-link to="/record/recharge">充值申请</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub5">
              <span slot="title"> <a-icon type="file-image" />轮播图</span>
              <a-menu-item key="16">
                <router-link to="/banner/index">轮播图列表</router-link>
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout-content
            :style="{
              background: '#fff',
              padding: '24px',
              margin: 0,
              minHeight: '280px',
            }"
          >
            <router-view />
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}

#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>
